<template>
  <div class="component-wrapper">

    <h2>当前评分：{{ myStar }}</h2>
    <star-box
      :star="myStar"
      @change="myStar = $event"
      :disabled="true"
    />
    <br/>

     <!-- 只有布尔类型的props，如果是 true 的话，可以省略等号后面的内容，直接写一个属性名 -->
     <star-box
      :star="2"
      disabled
     />
     <br/>


    <step-input
      :num="myNum"
      @change="myNum = $event"
    >
    </step-input>



    <son-box
      :name="'丽丽'"
      @call-father="onCall"
    />

    <!-- 方法的插值绑定， 不是事件监听的回调-->
    <number-box
      v-show="false"
      v-for="n in 100"
      :key="n"
      :base='n'
      :bg="getRandomColor()"
    ></number-box>


    <h3>你的理想：</h3>
    <p>月收入{{ money }}</p>
    <number-box
      :base="money"
      :bg="getRandomColor()"
      @add-num="addMoney"
    >
    </number-box>

    <p>房子面积{{ house }}</p>
    <number-box
      :base="house"
      :bg="getRandomColor()"
      @add-num="house = $event"
    >
    </number-box>

    <p>小孩{{ kid }}</p>
    <number-box
      :base="kid"
      :bg="getRandomColor()"
      @add-num="addKid($event)"
    >
    </number-box>

  </div>
</template>

<script>
// 先倒入，在注册
import Numberbox from '../components/NumberBox.vue';
import SonBox from '../components/SonBox.vue';
import StarBox from '../components/StarBox.vue';
import StepInput from '../components/StepInput.vue';
export default {
  data() {
    return {
      money: 20000,
      house: 120,
      kid:2,

      myNum: 100, // StemInput 组件用到的属性

      myStar: 3
    }
  },
  // 使用 components 注册局部组件
  components: {
    'number-box': Numberbox,
    'son-box': SonBox,
    'step-input': StepInput,
    StarBox
  },
  methods: {
    getRandomColor() {
      const c = () => 200 + Math.floor(Math.random() * 56);
      return `rgb(${c()}, ${c()}, ${c()})`;
    },

    // 自定义事件的回调函数默认参数就是，子组件 $emit 出来的值（第二个参数）
    addMoney(ev, i) {
      this.money = ev;
      console.log(i)
    },

    addKid(ev) {
      this.kid = ev;
    },

    onCall(ev) {
      console.log(ev);
    }
  }
}
</script>
